:root {
  /* 字体 */
  --font-family: 'Helvetica Neue', helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', arial, sans-serif;

  /* 基础颜色 */
  --color-white: #fff; /* 白色 */
  --color-black: #000; /* 黑色 */

  /* 字体大小 */
  --font-size-4xs: 8px; /* 超小字体，用于小型文本或标签 */
  --font-size-3xs: 10px; /* 超小字体，用于小型文本或标签 */
  --font-size-2xs: 12px; /* 小字体，适合辅助文本 */
  --font-size-xs: 14px; /* 小字体，适合辅助文本 */
  --font-size: 16px; /* 默认字体，主要文本使用 */
  --font-size-xl: 18px; /* 超大字体，用于大标题 */
  --font-size-2xl: 20px; /* 超超大字体，强调文本 */
  --font-size-3xl: 22px; /* 特大字体，醒目的文本 */
  --font-size-4xl: 24px; /* 四倍超大字体，显著强调 */
  --font-size-5xl: 26px; /* 五倍超大字体，特殊用途 */
  --font-size-6xl: 28px; /* 六倍超大字体，主要视觉焦点 */
  --font-size-7xl: 30px; /* 七倍超大字体，重要视觉元素 */
  --font-size-8xl: 32px; /* 八倍超大字体，极大文本 */
  --font-size-9xl: 34px; /* 九倍超大字体，超大文本 */
  --font-size-10xl: 36px; /* 十倍超大字体，极为显著 */
  --font-size-11xl: 38px; /* 十一倍超大字体，强调重要内容 */
  --font-size-12xl: 40px; /* 十二倍超大字体，最重要的文本 */

  /* 圆角 */
  --radius-2xs: calc(var(--radius) - 6px); /* 小圆角，用于小型按钮或卡片 */
  --radius-xs: calc(var(--radius) - 4px); /* 中等圆角，适用于常规按钮和输入框 */
  --radius: 0.5rem; /* 基础圆角 */
  --radius-xl: calc(var(--radius) + 4px); /* 大圆角，用于较大的容器或按钮 */
  --radius-2l: calc(var(--radius) + 6px); /* 更大圆角，用于较大的容器或按钮 */
  --radius-round: 30px; /* 圆形圆角，用于圆形元素或大按钮 */
  --radius-full: 100%; /* 完全圆角 (圆形)，用于完全圆形的元素，如头像或圆形按钮 */

  /* 字体颜色 */
  --foreground: #323639; /* 正文主字体颜色 */
  --foreground-placeholder: #a8abb2; /* 占位符文本颜色 */
  --foreground-disabled: #c0c4cc; /* 禁用状态文本颜色 */

  /* 背景颜色 */
  --background: #fff; /* 默认背景颜色 */
  --background-deep: #f1f3f6; /* 深层背景色 */
  --background-disabled: #f5f7fa; /* 禁用状态背景色 */

  /* 边框颜色 */
  --border: #e4e4e7; /* 默认边框颜色 */
  --border-light: #e4e7ed; /* 浅边框颜色 */
  --border-lighter: #ebeef5; /* 更浅边框颜色 */
  --border-dark: #d4d7de; /* 深边框颜色 */
  --border-darker: #cdd0d6; /* 更深边框颜色 */

  /* 主题颜色 */
  --primary: #1890ff; /* 主题背景色 */
  --primary-foreground: #fafafa; /* 主题前景色 */

  /* 错误颜色 */
  --error: #ff4d4f; /* 错误背景色 */
  --error-foreground: #fafafa; /* 错误前景色 */

  /* 成功颜色 */
  --success: #57d188; /* 成功背景色 */
  --success-foreground: #fafafa; /* 成功前景色 */

  /* 警告颜色 */
  --warning: #efbd48; /* 警告背景色 */
  --warning-foreground: #fafafa; /* 警告前景色 */

  /* 次要颜色 */
  --secondary: #f4f4f5; /* 辅助区域 背景颜色 */
  --secondary-foreground: #18181b; /* 辅助区域 前景色 */

  /* 柔和颜色 */
  --muted: #f4f4f5; /* 提示或禁用区域 背景色 */
  --muted-foreground: #71717a; /* 提示或禁用区域 前景色 */

  /* 强调颜色 */
  --accent: #f4f4f5; /* 高亮组件的背景 */
  --accent-foreground: #18181b; /* 强调区域的文字颜色 */

  /* 用于元素获得焦点时显示的焦点环效果 */
  --ring: var(--primary); /* 聚焦时的边框高亮（例如按钮/输入框） */

  /* 遮罩颜色 */
  --overlay: rgb(0 0 0 / 45%); /* 遮罩颜色，透明度40，透明度45% */
  --overlay-content: rgb(242 242 242 / 45%); /* 浅色遮罩，透明度45% */
}
